import React, { Component } from 'react'
import { } from 'antd-mobile'
import { Dialog, SearchBar, Toast } from 'antd-mobile'
import './index.css'
import axios from 'axios';
import debounce from "lodash/debounce"
export default class Search extends Component {
    constructor() {
        super();
        this.state = {
            searchTxt: "",
            keywordsArr: [],
            searchList: []
        }
        this.getSearchData = debounce(this.getSearchData, 1000)
    }
    componentDidMount() {
        axios.post("https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/searchWords", { "page": 1, "isWholeSale": 0, "channelId": null, "memberKey": "" }).then(
            (res) => {
                this.setState({
                    keywordsArr: res.data.data.keywords
                })
            }
        )
    }
    changeTxt = (val) => {
        this.setState({
            searchTxt: val
        })
        if (val === "") {
            this.setState({
                searchList: []
            })
        }
        this.getSearchData(val);
    }
    goList = (item) => {
        let content = item.replace(/(<([^>]+)>)/ig, '');
        this.props.history.push('/list/' + content);
    }
    getSearchData = (val) => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/esApi/suggestion', { "key": val, "isWholeSale": 0, "channelId": "C06022632001" }
        ).then((res) => {
            console.log(res);
            let data = res.data.data.suggestionList;
            if (data.length > 0) {
                data = data.map((item) => {
                    return item.replaceAll(val, `<span class='highlight'>${val}</span>`);
                })
                this.setState({
                    searchList: data
                }, () => {
                    console.log(this.state.searchList);
                })
                let historyArr = JSON.parse(localStorage.getItem("historyArr")) || [];
                historyArr = [...new Set([...historyArr, val])];
                localStorage.setItem("historyArr", JSON.stringify(historyArr));
            }
        })
    }
    render() {
        let { searchTxt, keywordsArr, searchList } = this.state;
        let historyArr = JSON.parse(localStorage.getItem("historyArr")) || [];
        return (
            <div className='searchcon'>
                <div className='search'><SearchBar placeholder='请输入内容' showCancelButton={() => true} value={searchTxt} onChange={this.changeTxt} /></div>
                {searchList.length !== 0 ? <ul className='search-pre-list'>
                    {
                        searchList.map((item, index) => <li key={index} dangerouslySetInnerHTML={{ __html: item }} onClick={() => { this.goList(item) }}></li>)
                    }
                </ul> :
                    <div className='itemWrap'>
                        <div className='search__lab'>热门搜索</div>
                        <div className='search__items--hot'>
                            {
                                keywordsArr.map((item) => <span key={item.code} className={item.isHighlight === '1' ? 'active' : ""}>{item.name}</span>)
                            }
                        </div>
                        <div className='flex_history'>
                            <span>搜索历史</span>
                            <div onClick={async () => {
                                const result = await Dialog.confirm({
                                    content: '确定要删除搜索历史吗？',
                                })
                                if (result) {
                                    localStorage.clear();
                                    this.props.history.push("/search");
                                    Toast.show({ content: '已删除', position: 'bottom' })
                                } else {
                                    Toast.show({ content: '已取消', position: 'bottom' })
                                }
                            }}></div>
                        </div>
                        <div className='search__items--history'>
                            {historyArr.map((item, index) => <span key={index}>{item}</span>)}
                        </div>
                    </div>}
            </div>
        )
    }
}
